<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="./ico/iconfont.css">
		<script src="./jquery.min.js"></script>
		<script src="./zrender.js"></script>
		<script src="./myshape.js"></script>
		<style>
			body,ul{
				margin:0;
				padding:0;
			}
			.abs{
				position:absolute;
				width:200px;
				z-index:10000;
				background-color:rgba(227,244,255,.9);
				cursor:move!important;
			}
			.left {
				float:left;
				width:15%;
			}
			.left ul li{
				list-style-type:none;
				border:1px solid #289de9;
				border-radius: 15px;
				cursor:pointer;
				line-height:26px;
				-webkit-touch-callout: none; /* iOS Safari */
				-webkit-user-select: none; /* Chrome/Safari/Opera */
				-khtml-user-select: none; /* Konqueror */
				-moz-user-select: none; /* Firefox */
				-ms-user-select: none; /* Internet Explorer/Edge */
				user-select: none; /* Non-prefixed version, currently not supported by any browser */
				margin:4px 1px;
				overflow:hidden
			}
			.left ul li .iconfont{
				width: 26px;
				height: 26px;
				margin: 1px;
				border-radius: 100%;
			}
			.left ul li .iconfont{
				float: left;
				color: #fff;
				font-size: 23px;
				background-color: #289de9;
			}
			.pDiv{
				float:left;
				width:83%;
				height:400px;
				border:5px solid rgb(255,0,0,0.1);
				overflow-y:scroll;
				position:relative;
				overflow-x:hidden;
			}
			.mydiv{
				width:100%;
				height:1200px;
				margin:0 auto;
				background-image:url('sqb33-handle.jpg');

			}
		</style>
	</head>
	<body>
	<div class='left'>
		<ul>
			<li>
			<span class="iconfont icon-dataBase"></span>
			 存储过程
			</li>
			<li>
			<span class="iconfont icon-SQLshujuji"></span>
			SQL脚本
			</li>
			<li>
			<span class="iconfont icon-icon-dian"></span>
			类型转换
			</li>
			<li>
			<span class="iconfont icon-jiedianchaifen"></span>
			 归一化
			</li>
			<li>
			<span class="iconfont icon-jiedianchaifen"></span>
			拆分
			</li>
			<li>
			<span class="iconfont icon-jiedianchaifen"></span>
			全表统计
			</li>
		</ul>
	</div>
	<div class="pDiv">
		<div id="mydiv" class="mydiv">
		
		</div>
	</div>
	<script>
			var zr = zrender.init(document.getElementById('mydiv'),{'renderer':'svg'});//canavs
									
			var startX, startY, diffX, diffY;
			var startL,startT;
			var newRect;
			var currRectId = null;
			
			$(function(){
				
				startL = $('#mydiv').offset().left;
				startT = $('#mydiv').offset().top;		
				$('#mydiv').width($('#mydiv').parent().width());
				
				var disX = 100;
				var disY = 10;
				var li_id = 0;
				var anim_top = 0;
				var anim_left = 0;
				
				$('.left ul li').mousedown(function(ev) {
					anim_top = $(this).position().top;
					anim_left = $(this).position().left;
					
					$li = $(this.outerHTML);
					$li.addClass('abs');
					$li.css({'top':ev.pageY - disY,'left':ev.pageX - disX});
					$li.attr('id','li_' + ++li_id);
					$('.left ul').append($li);
					
					
					$(document).mousemove(function(ev) {
						$('#li_' + li_id).css('left', ev.pageX - disX);
						$('#li_' + li_id).css('top', ev.pageY - disY);
					});
					$(document).mouseup(function() {
						$('#li_' + li_id).animate({top:anim_top,left:anim_left},null,null,function(){
							$(this).remove();
						});

						zr.add(z_g__);
						$(document).off();
					});
					return false;
				});

			});
			
			zr.on('mousedown',function(e){
				
				if(currRectId)return;
				
				e = window.event;
				startX = e.pageX;
				startY = e.pageY;
				
				newRect = new zrender.Rect({
					shape: {
						x: startX - startL,
						y: startY - startT,
						width: 0,
						height: 0
					},
					style: {
						fill: '#F00',
						opacity: 0.1
					},
					draggable: true,
					rectHover: true
				});
				
				zr.add(newRect);
				
				newRect.on('mousedown',function(){
					currRectId = this.id;
					return;
				})
			});
			
			zr.on('mousemove',function(e){
				e = window.event;
				diffX = e.pageX - startX;
				diffY = e.pageY - startY;
				
				if(newRect){
					newRect.attr({
						shape: {
							width: diffX,
							height:diffY
						}
					});
				
				}
				
			});
			
			zr.on('mouseup',function(){
				newRect = null;
				currRectId = null;
			});
		</script>
	</body>
</html>